<template>
	<view style="border: 1px solid #ccc">
		<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
			:mode="mode" />
		<Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
			:mode="mode" @onCreated="handleCreated" />
	</view>
</template>

<script>
	import '@wangeditor/editor/dist/css/style.css' // 引入 css

	import {
		onBeforeUnmount,
		ref,
		shallowRef,
		onMounted
	} from 'vue';
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue';
	import {
		DomEditor
	} from '@wangeditor/editor';
	export default {
		components: {
			Editor,
			Toolbar
		},
		setup() {
			// 编辑器实例，必须用 shallowRef
			const editorRef = shallowRef()

			// 内容 HTML
			const valueHtml = ref('<p>hello</p>')

			// 模拟 ajax 异步获取内容
			onMounted(() => {
				setTimeout(() => {
					valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
				}, 1500)
			})

			const toolbarConfig = {
				excludeKeys: [
					
				]
			}
			toolbarConfig.toolbarKeys  = [
				'blockquote',
				'header1',
				'header2',
				'header3',
				'|',
				'bold',
				'underline',
				'italic',
				'through',
				'color',
				'bgColor',
				'clearStyle',
				'|',
				'bulletedList',
				'numberedList',
				'justifyLeft',
				'justifyRight',
				'justifyCenter',
				'|',
				'insertLink',
				'uploadImage',
				'codeBlock',
				'undo',
				'redo'
			]
			// toolbarConfig.insertKeys = {
			// 	index: 6, // 插入的位置，基于当前的 toolbarKeys
			// 	keys: ['through'],
			// }
			const editorConfig = {
				placeholder: '请输入内容...'
			}

			// 组件销毁时，也及时销毁编辑器
			onBeforeUnmount(() => {
				const editor = editorRef.value
				if (editor == null) return
				editor.destroy()
			})

			const handleCreated = (editor) => {
				editorRef.value = editor // 记录 editor 实例，重要！
				console.log("getAllMenuKeys", editor.getAllMenuKeys())
				console.log("toolbar", DomEditor.getToolbar(editor))
			}
			console.log('toolbarConfig:', toolbarConfig);
			return {
				editorRef,
				valueHtml,
				mode: 'simple', // 或 'simple'
				toolbarConfig,
				editorConfig,
				handleCreated,
			}
		}
	}
</script>

<style lang="scss">
	#view1 {
		width: 90%;
		margin: 0 auto;
		padding-top: 100rpx;
		padding-bottom: 100rpx;
	}
</style>